<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ball-fall</title>
</head>
<body>
    <canvas id="canvas" style="border: 2px solid #ccc; display: block; margin: 20px auto 0;">
        当前浏览器不支持canvas，请更换浏览器后再试
    </canvas>
    <script>
        var ball = {x: 900, y: 200, vx: -4, vy: -6, g: 1.5}
        var WIDTH = 1000, HEIGHT = 700, RIDIUS = 15
        window.onload = function(){
            /** @type {HTMLCanvasElement} */ 
            var canvas = document.getElementById('canvas'),
                context = canvas.getContext('2d')
            // 画布宽高
            canvas.width = WIDTH
            canvas.height = HEIGHT
            setInterval(function(){
                render(context)
                update()
            }, 50)
        }
        function render(cxt){
            // cxt.clearRect(0, 0, WIDTH, HEIGHT)
            cxt.beginPath()
            cxt.arc(ball.x, ball.y, RIDIUS, 0, 2*Math.PI)
            cxt.closePath()
            cxt.fillStyle = '#f0f'
            cxt.fill();
        }
        function update(){
            ball.x += ball.vx
            ball.y += ball.vy
            if(ball.y >= HEIGHT-RIDIUS){
                ball.y = HEIGHT-RIDIUS
                ball.vy = -ball.vy*0.7
            }else{
                ball.vy += ball.g
            }
        }
    </script>
</body>
</html>